<script setup>
import { onMounted } from 'vue'
import { useCanvasStore } from '@/stores/canvas'
import ComponentLibrary from '@/components/ComponentLibrary.vue'
import Canvas from '@/components/Canvas.vue'
import PropertyPanel from '@/components/PropertyPanel.vue'
import Toolbar from '@/components/Toolbar.vue'

const canvasStore = useCanvasStore()

onMounted(() => {
  canvasStore.initHistory()
})
</script>

<template>
  <div class="app h-screen flex flex-col bg-gray-100">
    <!-- 顶部工具栏 -->
    <Toolbar />
    
    <!-- 主要内容区域 -->
    <div class="flex-1 flex overflow-hidden">
      <!-- 左侧组件库 -->
      <div class="w-1/5 bg-white border-r border-gray-200 overflow-hidden">
        <ComponentLibrary />
      </div>
      
      <!-- 中间画布区域 -->
      <div class="flex-1 bg-gray-50 overflow-auto">
        <Canvas />
      </div>
      
      <!-- 右侧属性面板 -->
      <div class="w-1/5 bg-white border-l border-gray-200 overflow-hidden">
        <PropertyPanel />
      </div>
    </div>
  </div>
</template>

<style scoped>
.app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style>
